import { CircularProgress, Dialog } from '@mui/material';
import { makeStyles } from '@mui/styles';

import PopupTransition from './shared/dialogs/UIs/popup-transition';

export interface Props {
    message?: string;
    show: boolean;
    progress?: number;
    total?: number;
}

const useStyles = makeStyles(() => ({
    '.popup': {
        background: 'rgba(4, 4, 4, 0.75)'
    },

    '.popup-content': {
        background:
            'linear-gradient(278.2deg, rgba(56, 175, 254, 0.95) -29.02%, rgba(74, 17, 145, 0.95) 113.46%)',
        borderRadius: 5,
        borderColor: 'transparent !important',
        color: '#FFF !important',
        padding: '40px !important',
        width: '300px !important'
    }
}));

export default function LoadingWithProgressPopup(props: Props) {
    const styles = useStyles();
    return (
        <div>
            <Dialog
                open={props.show}
                TransitionComponent={PopupTransition}
                keepMounted
                aria-describedby="alert-dialog-slide-description"
                className={styles['.popup']}
            >
                <div className={`${styles['.popup-content']} text-center`}>
                    {props.message}
                    <br />
                    <br />

                    <CircularProgress size={30} />
                </div>
            </Dialog>
        </div>
    );
}
